<template>
  <div style="width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; overflow: scroll;">
    <div style="width: 1000px; height: 100%; margin-top: 40px; text-align: left;">
      <el-form ref="form" :model="form" label-width="150px">
        <el-form-item label="课程封面">
          <!-- 图片上传的空间 -->
          <el-upload
            class="avatar-uploader"
            :action="uploadPath"
            :on-success="uploadSucc"
            :show-file-list="false">
            <img v-if="imageUrl" :src="imageUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>

        </el-form-item>
        <el-form-item label="课程名称">
          <el-input v-model="form.cname" placeholder="请输入课程名称" style="width: 250px;"></el-input>
        </el-form-item>
        <el-form-item label="课程分类">

          <el-button type="success" @click="dialogVisible = true">{{typeName}}</el-button>

        </el-form-item>
        <el-form-item label="价格">
          <el-input v-model="form.price" placeholder="请输入课程价格, 不填代表课程免费"  style="width: 250px;"></el-input>
        </el-form-item>
        <el-form-item label="开课时间">
          <el-date-picker
            v-model="form.beginDate"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="节课时间">
          <el-date-picker
            v-model="form.endDate"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="课程详情介绍">
          <!-- 富文本控件 -->
          <MyEditor ref="myeditor"></MyEditor>
        </el-form-item>


        <el-form-item>
          <el-button type="primary" @click="onSubmit">发布课程</el-button>
          <el-button>取消</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 弹出框 -->
    <el-dialog
      title="选择课程分类"
      :visible.sync="dialogVisible"
      width="30%">

      <CourseTypeTree :param="treeParam"></CourseTypeTree>
    </el-dialog>
  </div>
</template>

<script>
  import CourseTypeTree from './CourseTypeTree'
  import MyEditor from './MyEditor'

  export default {
    //注册局部组件
    components: {CourseTypeTree, MyEditor},
    data() {
      return {
        dialogVisible: false,
        typeName: "选择课程分类",
        uploadPath: this.$.baseUrl + "/user/img/uploader",
        imageUrl: null,
        //树状结构的参数对象
        treeParam: {
          btns: [{
            btnName: "选择当前分类",
            click: (data) => {
              //分类的id    data.id
              this.form.tpid = data.id;
              //分类的名称   data.label
              this.typeName = data.label;
              //关闭弹出框
              this.dialogVisible = false;
            }
          }]
        },
        //提交数据的表单对象
        form: {
          tpid: null,
          fengmian: null
        }
      }
    },
    methods: {
      //发布课程
      onSubmit() {
        this.form.info = this.$refs.myeditor.html;

        this.$.ajax({
          type: "POST",
          url: "/course/insert",
          data: this.form,
          success: (data) => {
            this.$message.success("课程发布成功！");
            this.form = {};
            this.imageUrl = null;
            this.$refs.myeditor.html = "";
          }
        });
      },
      //图片上传
      uploadSucc(result){
        console.log("上传后的图片名称：" + result.data);
        this.form.fengmian = result.data;
        //头像的回显
        this.imageUrl = this.$.getImgUrl(result.data);
      }
    }
  }
</script>

<style scoped>
    .el-upload {
      border: 1px dashed #42B983;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
      border-color: #409EFF;
    }
    .avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 178px;
      height: 178px;
      line-height: 178px;
      text-align: center;
      border: 1px dashed #8c939d;
      border-radius: 6px;
    }
    .avatar {
      width: 178px;
      height: 178px;
      display: block;
    }
</style>
